<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
      <input type="text" v-model="mytext"/> {{mytext}}
      <button @click="handleAddClick">add</button>

      <ul>
        <li v-for="(data,index) in datalist">
          {{data}}---{{index}}
          <button @click="handleDelClick(index)">del</button>
        </li>
      </ul>
    </div>

    <script type="text/javascript">
       var vm = new Vue({
         el:"#box",
         data:{
           datalist:[],
           mytext:"111111"
         },
         methods:{
          handleAddClick(){
            this.datalist.push(this.mytext)
          },
          handleDelClick(index){
            console.log("delete",index);
            //splice
            this.datalist.splice(index,1)
          }
         }
       })

        // 新老虚拟dom对比的 时候 会 使用 diff 算法。
    </script>
</body>
</html>